import React, { useState } from "react";
import { useNavigate } from 'react-router-dom'
import '../KFR_css/guah.css'
import { LeftOutline, DownFill, SearchOutline, ClockCircleOutline, RightOutline } from 'antd-mobile-icons'

export default function Guahao() {
    const navigate = useNavigate()
    const [fj_hosp,setfj_hosp] = useState([
        {
            id:1,
            name:'北京协和医院',
            img:'/KFR_imgs/1.webp',
            spec:'内科',
            distance:'0.5km',
            address:'北京市东城区帅府园一号'
        },
        {
            id:2,
            name:'中国人民解放军总医院',
            img:'/KFR_imgs/2.webp',
            spec:'中医肾病科、中医血液病科',
            distance:'22.3km',
            address:'北京市海淀区复兴路28号'
        },
        {
            id:3,
            name:'北京大学第三医院',
            img:'/KFR_imgs/3.webp',
            spec:'综合、骨科、消化科',
            distance:'0.5km',
            address:'北京大学第三医院机场院区'
        },
        {
            id:4,
            name:'北京大学人民医院',
            img:'/KFR_imgs/4.webp',
            spec:'妇产科、内科、外科、中医科',
            distance:'13.9km',
            address:'北京市西城区西直门南大街11号'
        },
        {
            id:5,
            name:'北京大学第一医院',
            img:'/KFR_imgs/1.webp',
            spec:'产科，妇科、小儿外科',
            distance:'13.9km',
            address:'北京市西城区西什库大街8号'
        },
        {
            id:6,
            name:'中国医学科学院医院',
            img:'/KFR_imgs/2.webp',
            spec:'心血管内科，血液内科',
            distance:'14.7km',
            address:'北京市西城区北里土路167号'
        },
        
    ])
    return (
        <div className="guah">
            <div className="guah_b1">
                <div className="guah_b1_1">
                    <div className="guah_b1_1_1" onClick={() => { navigate('/fuwu') }}>
                        <LeftOutline fontSize={18} />
                    </div>
                    <div className="guah_b1_1_2">挂号就诊</div>
                </div>
            </div>

            <div className="guah_b2">
                <div className="guah_b2_1">
                    <div className="guah_b2_1_1">
                        <div className="guah_b2_1_1_1">北京
                            <DownFill fontSize={16} />
                        </div>
                        <div className="guah_b2_1_1_2">
                            <div className="guah_b2_1_1_2_1">
                                <div className="guah_b2_1_1_2_1_1">
                                    <SearchOutline fontSize={18} />
                                </div>
                                <div className="guah_b2_1_1_2_1_2">搜索科室、疾病、医院</div>
                            </div>
                        </div>
                    </div>
                    <div className="guah_b2_1_2">
                        <div className="guah_b2_1_2_1">
                            <div className="guah_b2_1_2_1_1">
                                <svg onClick={()=>{navigate('/ks_guah')}} t="1739277483533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15053" width="200" height="200"><path d="M712.533333 989.866667V716.8H373.333333v273.066667h151.466667v-106.666667c0-12.8 10.666667-21.333333 21.333333-21.333333 12.8 0 21.333333 10.666667 21.333334 21.333333v106.666667h145.066666z m-164.266666-172.8c-12.8 0-21.333333-10.666667-21.333334-21.333334v-19.2c0-12.8 10.666667-21.333333 21.333334-21.333333 12.8 0 21.333333 10.666667 21.333333 21.333333v19.2c0 12.8-8.533333 21.333333-21.333333 21.333334zM373.333333 106.666667v339.2h339.2V106.666667H373.333333z m270.933334 192h-72.533334v72.533333c0 12.8-10.666667 21.333333-21.333333 21.333333-12.8 0-21.333333-10.666667-21.333333-21.333333V298.666667h-72.533334c-12.8 0-21.333333-10.666667-21.333333-21.333334 0-12.8 10.666667-21.333333 21.333333-21.333333h72.533334V181.333333c0-12.8 10.666667-21.333333 21.333333-21.333333 12.8 0 21.333333 10.666667 21.333333 21.333333v72.533334h72.533334c12.8 0 21.333333 10.666667 21.333333 21.333333s-10.666667 23.466667-21.333333 23.466667z" fill="#ffffff" p-id="15054"></path><path d="M610.133333 217.6h-72.533333V145.066667c0-12.8-10.666667-21.333333-21.333333-21.333334-12.8 0-21.333333 10.666667-21.333334 21.333334v72.533333h-72.533333c-12.8 0-21.333333 10.666667-21.333333 21.333333 0 12.8 10.666667 21.333333 21.333333 21.333334h72.533333v72.533333c0 12.8 10.666667 21.333333 21.333334 21.333333 12.8 0 21.333333-10.666667 21.333333-21.333333v-72.533333h72.533333c12.8 0 21.333333-10.666667 21.333334-21.333334s-8.533333-21.333333-21.333334-21.333333z" fill="#ffffff" p-id="15055"></path><path d="M985.6 125.866667H710.4V64c0-21.333333-17.066667-38.4-38.4-38.4H320c-21.333333 0-38.4 17.066667-38.4 38.4v61.866667H38.4c-21.333333 0-38.4 17.066667-38.4 38.4V960c0 21.333333 17.066667 38.4 38.4 38.4h947.2c21.333333 0 38.4-17.066667 38.4-38.4V164.266667c0-21.333333-17.066667-38.4-38.4-38.4zM326.4 70.4h339.2v339.2H326.4V70.4z m339.2 883.2h-142.933333v-106.666667c0-12.8-10.666667-21.333333-21.333334-21.333333-12.8 0-21.333333 10.666667-21.333333 21.333333v106.666667h-153.6V680.533333h339.2v273.066667z m313.6 0H708.266667V674.133333c0-21.333333-17.066667-38.4-38.4-38.4H320c-21.333333 0-38.4 17.066667-38.4 38.4v279.466667H44.8V170.666667h236.8v245.333333c0 21.333333 17.066667 38.4 38.4 38.4h352c21.333333 0 38.4-17.066667 38.4-38.4V170.666667H981.333333c-2.133333 0-2.133333 782.933333-2.133333 782.933333z" fill="#ffffff" p-id="15056"></path><path d="M514.133333 780.8c12.8 0 21.333333-10.666667 21.333334-21.333333v-19.2c0-12.8-10.666667-21.333333-21.333334-21.333334-12.8 0-21.333333 10.666667-21.333333 21.333334v19.2c0 12.8 10.666667 21.333333 21.333333 21.333333z" fill="#ffffff" p-id="15057"></path><path d="M93.866667 343.466667h138.666666v138.666666H93.866667v-138.666666z m0 196.266666h138.666666v138.666667H93.866667v-138.666667z m684.8-196.266666H917.333333v138.666666h-138.666666v-138.666666z m0 196.266666H917.333333v138.666667h-138.666666v-138.666667z" fill="#ffffff" p-id="15058"></path></svg>
                            </div>
                            <div className="guah_b2_1_2_1_2">按科室挂号</div>
                        </div>
                        <div className="guah_b2_1_2_2">
                            <div className="guah_b2_1_2_2_1">
                                <svg t="1739277771355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4377" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#ffffff" fill-opacity="0" p-id="4378"></path><path d="M588.970667 113.777778H164.238222c-13.368889 0-26.225778 5.347556-35.697778 14.848A50.915556 50.915556 0 0 0 113.777778 164.551111v694.897778C113.777778 888.832 135.025778 910.222222 164.238222 910.222222h424.732445c26.538667 0 50.432-23.978667 50.432-50.773333V164.551111a50.915556 50.915556 0 0 0-14.762667-35.925333A50.232889 50.232889 0 0 0 588.970667 113.777778z m-241.607111 681.528889c0 7.992889-7.964444 15.985778-15.900445 15.985777H230.542222c-7.964444 0-15.900444-7.992889-15.900444-15.985777v-104.248889c0-7.964444 7.964444-15.985778 15.900444-15.985778h100.892445c7.936 0 15.872 7.992889 15.872 15.985778l0.056889 104.248889z m0-187.079111c0 7.992889-7.964444 15.985778-15.900445 15.985777H230.542222c-7.964444 0-15.900444-7.992889-15.900444-15.985777v-104.248889c0-7.964444 7.964444-15.985778 15.900444-15.985778h100.892445c7.936 0 15.872 7.992889 15.872 15.985778l0.056889 104.248889z m26.538666-208.497778c-13.283556 0-26.538667-10.666667-26.538666-24.035556v-50.801778h-50.460445c-13.283556 0-23.808-10.666667-23.808-26.709333 0-13.368889 10.609778-26.737778 23.808-26.737778h50.460445v-48.071111c0-13.368889 10.609778-24.007111 26.538666-24.007111 13.283556 0 26.567111 10.695111 26.567111 23.978667v50.801778h50.432c13.283556 0 23.836444 10.666667 23.836445 26.709333 0 13.368889-10.638222 26.737778-23.836445 26.737778H400.497778v50.773333c0 10.695111-13.283556 21.390222-26.567111 21.390222z m156.643556 395.576889c0 7.992889-7.936 15.985778-15.872 15.985777h-100.949334c-7.964444 0-15.872-7.992889-15.872-15.985777v-104.248889c0-7.964444 7.936-15.985778 15.872-15.985778h100.892445c7.964444 0 15.900444 7.992889 15.900444 15.985778l0.028445 104.248889z m0-187.079111c0 7.992889-7.936 15.985778-15.872 15.985777h-100.949334c-7.964444 0-15.872-7.992889-15.872-15.985777v-104.248889c0-7.964444 7.936-15.985778 15.872-15.985778h100.892445c7.964444 0 15.900444 7.992889 15.900444 15.985778l0.028445 104.248889zM857.116444 512H663.324444V910.222222h193.792C886.328889 910.222222 910.222222 886.243556 910.222222 859.448889v-296.675556c-2.645333-26.737778-26.538667-50.773333-53.105778-50.773333z" fill="#ffffff" p-id="4379"></path></svg>
                            </div>
                            <div className="guah_b2_1_2_2_2">按医院挂号</div>
                        </div>
                        <div className="guah_b2_1_2_3">
                            <div className="guah_b2_1_2_3_1">
                                <svg t="1739277971698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7269" width="200" height="200"><path d="M827.53286 0c78.907535 0 142.883721 63.976186 142.88372 142.883721v504.20093A253.261395 253.261395 0 0 0 833.486348 607.255814c-138.097116 0-250.046512 109.282233-250.046512 244.093023 0 67.429209 28.017116 128.476279 73.299349 172.651163H196.463092C117.555557 1024 53.579371 960.023814 53.579371 881.116279V142.883721C53.579371 63.976186 117.555557 0 196.463092 0h631.069768zM476.086534 659.765581H180.805418l-2.048 0.619163C167.993511 664.004465 160.742162 673.327628 160.742162 683.841488c0 10.525767 7.263256 19.84893 18.015256 23.468652l2.048 0.619162h295.281116l2.059907-0.619162c10.752-3.619721 18.003349-12.942884 18.003349-23.456745 0-11.192558-8.192-21.003907-20.063256-24.075907z m262.286884-122.856186H180.805418l-2.048 0.595349C167.993511 541.148279 160.742162 550.459535 160.742162 560.997209c0 10.51386 7.263256 19.837023 18.015256 23.456744l2.048 0.619163h557.568l2.059907-0.619163c10.752-3.619721 18.003349-12.942884 18.003348-23.456744 0-11.192558-8.180093-21.015814-20.063255-24.075907zM212.77565 302.818233C182.258069 322.381395 160.742162 356.292465 160.742162 394.99014v0.214325c0.881116 9.48986 7.382326 16.848372 15.407628 17.408 29.184 2.95293 64.821581 4.48893 96.565581 4.48893 32.708465 0 70.906047 0.297674 100.578233-2.750511 7.584744-0.821581 13.562047-15.383814 13.562046-15.383814H386.97472c0.035721-40.436093-21.599256-75.168744-52.819349-94.624744h-0.023814a14.812279 14.812279 0 0 0-17.717581 0.416744c-12.645209 10.132837-27.588465 15.467163-42.841303 15.276651-14.645581-0.011907-28.933953-5.465302-40.84093-15.586233a18.098605 18.098605 0 0 0-19.956093-1.631255z m339.539349 44.436837l-3.500651 0.66679H465.798906v15.502884h9.835163c5.834419 7.668093 12.835721 14.169302 20.503814 20.003721-11.50214 3.500651-24.33786 5.834419-37.673675 7.334698 3.333953 4.167442 7.334698 12.002233 9.001675 16.836465 17.16986-2.667163 33.67293-6.667907 48.509023-12.835721 13.169116 6.001116 28.338605 10.168558 45.341767 12.835721 2.667163-5.00093 7.834791-13.002419 12.002233-17.003163-13.169116-1.500279-25.171349-3.667349-36.340093-7.001302 11.835535-7.834791 21.170605-17.669953 27.838512-29.838884l-12.502326-6.501209z m70.179721-95.517768h-19.837023v34.006326l-14.002605-2.000372c-1.166884 13.669209-4.167442 32.339349-8.168186 43.341395l14.669395 5.334326c3.453023-10.656744 5.953488-26.564465 7.144186-39.852651l0.35721-4.250791v119.117395h19.837023v-113.854511c2.83386 6.834605 5.334326 14.169302 6.334512 19.170232l9.501767-4.334139c-1.666977 3.500651-3.333953 6.667907-5.00093 9.668465 4.667535 2.000372 13.669209 6.501209 17.669953 9.001674a113.878326 113.878326 0 0 0 9.33507-23.004279h18.336744v27.338419h-32.172651v18.503442h32.172651v33.339534H634.163557v18.836838h103.685954v-18.836838h-39.340651v-33.339534h30.505674v-18.503442h-30.505674v-27.338419h34.006325V285.410233h-34.006325v-32.672745h-19.837024v32.672745h-13.335814c1.666977-7.501395 3.000558-15.336186 4.167442-23.170977l-19.33693-2.667163c-1.666977 14.169302-4.667535 28.505302-8.834977 40.674233a191.130791 191.130791 0 0 0-9.168372-21.003907l-9.668465 4.000744v-31.505861z m-168.864744-0.166697h-18.170047v155.695628h18.170047V286.243721c2.667163 8.834977 5.167628 19.003535 6.001116 25.671442l8.501581-3.167256v33.172837h98.351628V307.08093h-93.85079l0.833488-0.333395c-1.333581-7.001302-5.00093-19.170233-8.168186-28.171907l-11.668837 3.667349v-30.672372z m449.41693 45.008372h-103.685953v16.836465h39.674046v11.668837h-38.507163v82.181954h17.669954v-33.339535c3.667349 3.167256 8.334884 8.668279 10.668651 12.16893 10.335256-5.834419 17.16986-13.669209 21.337302-21.837395 7.168 6.667907 14.336 14.002605 18.170047 19.003534l12.16893-10.668651v15.002791c0 1.833674-0.666791 2.500465-2.83386 2.500465-2.16707 0.166698-9.168372 0.166698-16.002977-0.166698 2.667163 4.667535 5.501023 12.002233 6.334511 17.336559 10.501953 0 18.336744-0.333395 24.004466-3.167256 5.834419-3.000558 7.501395-7.834791 7.501395-16.336372v-62.678326h-42.174512v-11.668837h45.675163v-16.836465z m-52.843163-45.675163l-21.337302 4.000744c1.333581 4.500837 2.83386 9.668465 4.000744 14.669395h-56.677209v40.17414c-2.333767-8.001488-6.834605-18.336744-11.168744-26.671628l-14.336 7.168c4.834233 10.168558 9.668465 23.337674 11.168744 31.672558l14.336-7.668093v4.834233c0 4.834233-0.166698 10.00186-0.333396 15.169488-10.168558 5.167628-19.837023 9.668465-26.671627 12.669023l5.66772 18.67014c6.001116-3.333953 12.335628-7.168 18.336745-10.835349-2.83386 14.002605-8.334884 27.671814-19.336931 38.840558 3.834047 2.333767 11.668837 9.501767 14.169303 13.169117 23.170977-22.837581 27.005023-61.011349 27.005023-87.51628v-31.839255h109.68707V269.573953h-48.342326a222.505674 222.505674 0 0 0-6.167814-18.670139z m-315.558697 112.52093c-5.00093 4.667535-11.168744 8.501581-18.003349 12.002233a80.610233 80.610233 0 0 1-18.003349-12.002233h36.006698z m303.88986-21.504c-1.333581 11.002047-5.667721 23.170977-20.337116 30.672372v-30.672372h20.337116z m42.007814 0v30.338977c-5.501023-6.501209-16.336372-16.50307-24.671256-23.504372 0.333395-2.333767 0.833488-4.500837 1.000186-6.834605h23.67107z m-459.252093-57.510697c-0.833488 13.502512-3.500651 32.172651-7.001302 43.67479l13.169116 4.33414c3.333953-12.835721 5.834419-32.506047 6.334512-46.175256l-12.502326-1.833674z m127.523721 34.673116v10.835349h-11.668837v-10.835349h11.668837z m-26.671628 0v10.835349h-11.168744v-10.835349h11.168744z m-26.004837 0v10.835349h-11.168744v-10.835349h11.168744z m62.178232-62.178233h-82.015255v45.17507h82.015255v-45.17507z m-19.503628 27.005023v6.834605h-44.008186v-6.834605h44.008186zM270.441139 142.883721a68.560372 68.560372 0 1 0 68.548465 68.191256A68.346047 68.346047 0 0 0 270.441139 142.883721z m268.371348 125.356651v6.667907h-44.008186v-6.667907h44.008186z" fill="#FFFFFF" p-id="7270"></path><path d="M920.08579 761.748837c34.018233 49.664 32.434605 116.093023-3.905489 164.006698l45.698977 46.580093a30.862884 30.862884 0 0 1 0 42.626977v-1.214512l-2.095628 2.131349c-11.454512 10.835349-29.172093 10.835349-40.614697 0l-49.890233-50.842791a132.798512 132.798512 0 0 1-132.417488-5.381953c-40.186047-25.266605-64.500093-70.096372-64.11907-118.236279-0.154791-60.558884 38.292837-114.211721 94.958139-132.45321 56.653395-18.253395 118.379163 3.131535 152.385489 52.783628zM809.672394 738.232558a101.209302 101.209302 0 1 0 0 202.418605 101.209302 101.209302 0 0 0 0-202.418605z" fill="#FFFFFF" p-id="7271"></path><path d="M765.080767 859.802791a9.251721 9.251721 0 0 0-8.954047 9.525581 9.251721 9.251721 0 0 0 8.954047 9.549395h35.780465v28.624373a9.251721 9.251721 0 0 0 8.942139 9.561302 9.287442 9.287442 0 0 0 8.954047-9.537489V878.853953h35.780465a9.263628 9.263628 0 0 0 8.954046-9.525581 9.263628 9.263628 0 0 0-8.954046-9.549395h-35.780465v-19.122605h35.780465a9.287442 9.287442 0 0 0 8.954046-9.525581 9.287442 9.287442 0 0 0-8.954046-9.549396h-31.160558l-0.35721-0.333395 28.624372-30.529488a10.525767 10.525767 0 0 0-0.27386-13.835907 8.930233 8.930233 0 0 0-12.954791-0.297675l-28.624372 30.577117-28.624372-30.577117a8.930233 8.930233 0 0 0-12.954791 0.309582 10.525767 10.525767 0 0 0-0.27386 13.824l28.624372 30.529488-0.297674 0.333395h-31.220093a9.251721 9.251721 0 0 0-8.954047 9.537489 9.251721 9.251721 0 0 0 8.954047 9.537488h35.780465v19.146419h-35.744744z" fill="#FFFFFF" p-id="7272"></path></svg>
                            </div>
                            <div className="guah_b2_1_2_3_2">按疾病挂号</div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="guah_b3">
                <div className="guah_b3_1">
                    <div className="guah_b3_1_1">
                        <ClockCircleOutline fontSize={17}/>
                    </div>
                    <div className="guah_b3_1_2">我的挂号记录</div>
                    <div className="guah_b3_1_3">查看
                        <RightOutline fontSize={17}/>
                    </div>
                </div>
            </div>

            <div className="guah_b4">
                <div className="guah_b4_1">
                    <div className="guah_b4_1_1">本地热门医院</div>
                    <div className="guah_b4_1_2">
                        <ul>
                            {
                                fj_hosp.map((ele,index)=>{
                                    return <li key={ele.id}>
                                    <div className="guah_b4_1_2_1">
                                        <div className="guah_b4_1_2_1_1">
                                            <img src={ele.img} />
                                        </div>
                                        <div className="guah_b4_1_2_1_2"></div>
                                    </div>
                                    <div className="guah_b4_1_2_2">
                                        <p className="p1">
                                            <div>三甲</div>
                                            <div>{ele.name}</div>
                                        </p>
                                        <p className="p2">特色科室：{ele.spec}</p>
                                        <p className="p3">{ele.distance} | {ele.address}</p>
                                    </div>
                                </li>
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    )
}